<template>
  <a-col flex="20px" :style="{ marginLeft: '4px', display: isShowMenuOperator ? 'flex' : 'none' }">
    <a-dropdown v-model:open="isDropdownOpen" overlay-class-name="side-bar-menu-dropdown">
      <!-- 节点右侧的三个点 -->
      <div :style="{ width: '100%' }">
        <icon-font type="icon-symbol-ellipsis" />
      </div>
      <!-- 弹出的菜单 -->
      <template #overlay>
        <hover-menu :node-key="nodeKey" />
      </template>
    </a-dropdown>
  </a-col>
</template>

<script lang="ts" setup>
import HoverMenu from './hover-menu/hover-menu.vue';
import { IconFont } from '@/components/icon-font';

const isDropdownOpen = ref(false);

const props = defineProps({
  /**
   * 当前节点 Key
   */
  nodeKey: {
    type: String,
    required: true,
  },
  /**
   * 鼠标悬停的节点 Key
   */
  hoverNodeKey: {
    type: String,
    required: true,
  },
});
const { nodeKey, hoverNodeKey } = toRefs(props);

// 是否展示节点右侧的三个点，鼠标悬停在当前节点上，或鼠标在当前节点对应的弹出菜单上时展示
const isShowMenuOperator = computed(() => {
  return nodeKey.value == hoverNodeKey.value || isDropdownOpen.value;
});
</script>
